<template>
  <div>
    <h1>情况五：watch监视上述的多个数据</h1>
    <p>姓名：{{ person.name }}</p>
    <p>年龄：{{ person.age }}</p>
    <p>第一台车：{{ person.car.c1 }}</p>
    <p>第二台车：{{ person.car.c2 }}</p>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整车</button>
  </div>
</template>

<script setup>
import { reactive, watch } from "vue";

let person = reactive({
  name: "小王",
  age: 20,
  car: {
    c1: "兰博基尼",
    c2: "法拉利",
  },
});

function changeName() {
  person.name += "~";
}
function changeAge() {
  person.age += 1;
}
function changeC1() {
  person.car.c1 = "保时捷";
}
function changeC2() {
  person.car.c2 = "奥迪";
}
function changeCar() {
  person.car = { c1: "大众", c2: "捷达" }; //person.car修改reactive内部的属性可以直接整体修改，但是reactive定义的对象不可以整体修改，只能修改属性
}
//情况五：watch监视上述的多个数据
watch(
  [() => person.name, () => person.car.c1],
  ([newName, newC1], [oldName, oldC1]) => {
    // console.log("person.car属性发生了变化", newValue, oldValue); //['小王~', '保时捷']
    console.log(`Name: ${oldName} -> ${newName}`);
    console.log(`C1: ${oldC1} -> ${newC1}`);
  },
  { deep: true }
);
</script>

<style scoped></style>
